<template>
	<view class="ranking">
		<view class="content">
			<view class="top">
				<view class="year">
					<view class="prve" @click="prve">
						<image src="@/static/image/ranking/timeLeft.svg" />
					</view>
					<view class="text">
						<text>{{ year }}年</text>
					</view>
					<view class="prve" @click="next">
						<image src="@/static/image/ranking/timeRight.svg" />
					</view>
				</view>
				<xbd-select-two :carId.sync="type" :option.sync="option" :val='val'  :visible.sync="visible" :infoList="infoList">
					<template>
						<view class="select" @click="visible = true">
							<view class="text">
								{{ type  }}
							</view>
							<image class="image" src="@/static/image/ranking/while-down.svg">
							</image>
						</view>
					</template>
				</xbd-select-two>
			</view>
			<view class="bottom">
				<view class="title">
					<view>名次</view>
					<view>单位</view>
					<view>等次</view>
					<view>得分</view>
					<view>奖励</view>
				</view>
				<xbd-zwnz v-if="ranking.length == 0" marginTop='200'></xbd-zwnz>
				<view v-else class="list">
					<view class="list-content" v-for="(item, i) in ranking" :key="i">
						<image v-if="item.number === 1" src="@/static/image/ranking/1.svg" />
						<image v-if="item.number === 2" src="@/static/image/ranking/2.svg" />
						<image v-if="item.number === 3" src="@/static/image/ranking/3.svg" />
						<view v-if="item.number >= 4" class="num">{{ item.number }}</view>
						<view class="mine">{{ item._id }}</view>
						<view :style="{ color: rankingColor(item.rank) }">{{ item.rank }}</view>
						<view><text>{{ item.score | priceFormat(1,'',true)}}</text>  </view>
						<view v-if="item.reward!==0" :style="{ color: item.reward !== 0 ? '#FFE3B4' : '' }">
							{{ item.reward | priceFormat(1,'',true)}}
							<text class="many" v-if="item.reward !== 0">万</text>
						</view>
						<view v-else style="margin-left: 18rpx;">-</view>
					</view>
				</view>
			</view>
		</view>
		<view class="all">
			<text>- 已展示全部 -</text>
		</view>



	</view>
</template>

<script>
	import {
		Prevention
	} from '@/api/index.js';
	const dayjs = require("dayjs");
	export default {
		name: "ranking",
		data() {
			const nowDate = dayjs(new Date()).format('M')
			return {
				nowDate:nowDate,
				option: '',
				visible: false,
				yearVisible: false,
				type: '第一季度',
				val:[],
				yearArr: [],
				infoList: [{
						label: "第一季度",
						value: "1",
					},
					{
						label: "第二季度",
						value: "2",
					},
					{
						label: "第三季度",
						value: "3",
					},
					{
						label: "第四季度",
						value: "4",
					},
				],
				ranking: [],
				year: new Date().getFullYear(),
			};
		},
		created() {},
		onShow() {
			this.handleYear();
		},
		watch: {
			type() {
				this.init()
			}
		},
		methods: {
			rankingColor(val) {
				let res = "";
				switch (val) {
					case "优秀":
						res = "#FFE3B4";
						break;
					case "良好":
						res = "#8FF7FF";
						break;
					case "一般":
						res = "";
						break;
				}
				return res;
			},
			prve() {
				console.log("---", this.year, new Date().getFullYear() - 5);
				if (this.year === new Date().getFullYear() - 4) return;
				this.year--;
				this.init()
			},
			next() {
				if (this.year >= new Date().getFullYear() +4) return;
				this.year++;
				this.init()
			},
			handleYear() {
				let arr = [];
				for (let i = 4; i >= 0; i--) {
					// console.log(i);
					arr.push({
						label: new Date().getFullYear() - i,
						value: new Date().getFullYear() - i,
					});
				}
				this.yearArr = arr;
			},

			async init() {
				const quarter = `${this.year}年${this.type}`
				this.ranking = []
				const res = await Prevention.getGovernRank(quarter)
				this.ranking = res.data
				// console.log(info, 'info')
				console.log(res, 'res')
			}
		},
		onLoad() {
			
			console.log(this.nowDate)
			if(this.nowDate <= 3){
				this.type = '第一季度'
				
				this.val=[0]
			}
			if(3 < this.nowDate &&  this.nowDate<=6){
				this.type = '第二季度'
				this.val=[1]
			}
			 if(6 < this.nowDate &&  this.nowDate<= 9){
				this.type = '第三季度'
				this.val=[2]
			}
			 if(9 < this.nowDate &&  this.nowDate<= 12){
				this.type = '第四季度'
				this.val=[3]
			}
			this.init()
		}
	};
</script>

<style lang="scss" scoped>
	.ranking {
		width: 100%;
		background: url("@/static/image/ranking/ranking.png") no-repeat;
		background-size: 100% 100%;
		padding: 30rpx;
		box-sizing: border-box;

		.content {
			height: 984rpx;
			background: url("@/static/image/ranking/card.svg") no-repeat;
			background-size: 100% 100%;
			margin-top: 350rpx;
			padding: 30rpx 30rpx 0 30rpx;
			box-sizing: border-box;
			color: #fff;
			font-size: 26rpx;

			.top {
				height: 56rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 50rpx;

				.year {
					width: 240rpx;
					height: inherit;
					margin-top: 6rpx;
					// border: 1rpx solid #669beb;
					border-radius: 12rpx;
					display: flex;
					justify-content: space-evenly;
					align-items: center;

					.prve {
						width: 44rpx;
						height: 44rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.text {
						font-size: 28rpx;
					}
				}

				.select {
					width: 300rpx;
					height: 60rpx;
					border: 2rpx solid #669beb;
					border-radius: 12rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 10rpx 0 20rpx;
					font-size: 26rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.bottom {
				.title {
					height: 80rpx;
					background: url("@/static/image/ranking/table-head.svg") no-repeat;
					// border-top: 1rpx dashed #d8d8d8;
					// border-bottom: 1rpx dashed #d8d8d8;
					background-size: 100% 100%;
					display: flex;
					justify-content: space-around;
					align-items: center;

					view:nth-child(3) {
						margin-left: 30rpx;
					}

					view:nth-child(2) {
						margin-left: 20rpx;
					}
				}

				.list {
					&-content {
						height: 120rpx;
						display: flex;
						//   justify-content: space-around;
						align-items: center;
						background: transparent;
						border-bottom: 1rpx transparent solid;
						border-image: linear-gradient(to right, #4a84f0, #92b4f7, #4a84f0) 1 10;

						image {
							width: 28rpx;
							height: 48rpx;
							margin: 0 45rpx;
						}

						view:nth-child(2) {
							width: 170rpx;
							margin-right: 30rpx;
						}

						view:nth-child(3) {
							margin-right: 50rpx;
						}

						view:nth-child(4) {
							width: 86rpx;
							text-align: center !important;
							margin-right: 40rpx;
						}


						.num {
							font-size: 36rpx;
							font-weight: 600;
							margin: 0 49rpx;
						}

						.many {
							font-size: 18rpx;
						}

						

						.numb {
							margin-left: 20rpx;
						}
					}

					&-content:last-child {
						border: none;
					}
				}
			}
		}

		.all {
			font-size: 30rpx;
			text-align: center;
			color: rgba($color: #fff, $alpha: 0.5);
			margin: 50rpx 0;
		}
	}
</style>
